<template>
  <div class="home_a-dashboard-container">
    <TitleBar
      title="系统首页"
      refresh
    />
    <div class="total">
      <ul>
        <li class="dingdan-box">
          <div class="img-a">
            <img
              src="../../../icons/icon/yly_订单.png"
              alt=""
            >
          </div>
          <div class="dingdan">
            <span class="s1">今日订单总数</span>
            <span class="s2">{{ orderData }}</span>
          </div>
        </li>
        <li class="dingdan-box">
          <div class="img-b">
            <img
              src="../../../icons/icon/金额拷贝.png"
              alt=""
            >
          </div>
          <div class="dingdan">
            <span class="s1">今日销售总额</span>
            <span class="s2"><i>￥</i>{{ todaySaleData }}</span>
          </div>
        </li>
        <li class="dingdan-box">
          <div class="img-b">
            <img
              src="../../../icons/icon/金额拷贝.png"
              alt=""
            >
          </div>
          <div class="dingdan">
            <span class="s1">昨日销售总额</span>
            <span class="s2"><i>￥</i>{{ yesOrder }}</span>
          </div>
        </li>
        <li class="dingdan-box">
          <div class="img-c">
            <img
              src="../../../icons/icon/上升.png"
              alt=""
            >
          </div>
          <div class="dingdan">
            <span class="s1">近7天销售总额</span>
            <span class="s2"><i>￥</i>{{ sevenTotal }}</span>
          </div>
        </li>
      </ul>
    </div>
    <!-- 处理 -->
    <div class="dispose">
      <h2>待处理事务</h2>
      <div class="min">
        <p>
          <span class="x1">待付款订单</span>
          <span class="x2">
            ( <i>{{ pendingOrder }}</i> )
          </span>
        </p>
        <p style="border-right:none">
          <span class="x3">已完成订单</span>
          <span class="x4">
            ( <i>{{ successOrder }}</i> )
          </span>
        </p>
      </div>
    </div>
    <!-- 数据 -->
    <div class="data">
      <div class="gt">
        <h3>运营快速入口</h3>
        <ul>
          <li
            class="yonghu"
            @click="goUser"
          >
            <div class="img-a">
              <img
                src="../../../icons/icon/用户管理.png"
                alt=""
              >
            </div>
            <span>用户管理</span>
          </li>
          <li
            class="yonghu"
            @click="goStatistics"
          >
            <div class="img-b">
              <img
                src="../../../icons/icon/统计.png"
                alt=""
              >
            </div>
            <span>交易统计</span>
          </li>
          <li
            class="yonghu"
            @click="goMsg"
          >
            <div class="img-c">
              <img
                src="../../../icons/icon/短信营销.png"
                alt=""
              >
            </div>
            <span>短信营销</span>
          </li>
        </ul>
      </div>
      <div class="gi">
        <h3>用户总览</h3>
        <ul>
          <li>
            <p class="num_a num">{{ newUser }}</p>
            <p class="text_j tex">今日新增</p>
          </li>
          <li>
            <p class="num_b num">{{ yesUser }}</p>
            <p class="text_z">昨日新增</p>
          </li>
          <li>
            <p class="num_c num">{{ mothData }}</p>
            <p class="text_b">本月新增</p>
          </li>
          <li>
            <p class="num_d num">{{ userData }}</p>
            <p class="text_y">用户总数</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="dashboard-box">
      <h3>订单统计</h3>
      <div class="dashboard">
        <div class="dashboard-lf">
          <div class="dash-lf-top">
            <div class="tot">本月订单总数</div>
            <span>{{ orderMnum }}</span>
            <div class="contrast">
              <i
                v-if="monthOup"
                class="up"
              >
                <img src="../../../icons/icon/shang (1).png">
                {{ orderMonth }}
              </i>
              <i
                v-else
                class="down"
              >
                <img src="../../../icons/icon/shang (2).png">
                {{ orderMonth }}%
              </i>
              同比上月
            </div>
          </div>
          <div class="dash-lf-bot">
            <div class="tot">本周订单总数</div>
            <span>{{ orderWnum }}</span>
            <div class="contrast">
              <i
                v-if="weekOup"
                class="up"
              >
                <img src="../../../icons/icon/shang (1).png">
                {{ orderWeek }}
              </i>
              <i
                v-else
                class="down"
              >
                <img src="../../../icons/icon/shang (2).png">
                {{ orderWeek }}%
              </i>
              同比上周
            </div>
          </div>
        </div>
        <div class="dashboard-lr">
          <div class="dashboard-lr-top">
            <div class="tit">近一周订单统计</div>
            <div class="sel">
              <div class="btn">
                <el-radio-group
                  v-model="radio"
                  @change="dasSel"
                >
                  <el-radio-button label="今日" />
                  <el-radio-button label="本周" />
                  <el-radio-button label="本月" />
                </el-radio-group>
              </div>
              <!-- <div class="block">
                <el-date-picker
v-model="value"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd"
                                @change="selOrderTime"
/>
              </div> -->
            </div>
          </div>
          <div class="dashboard-lr-bot">
            <div
              ref="_chart"
              class="echar"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="sale-box">
      <h3>销售统计</h3>
      <div class="dashboard">
        <div class="dashboard-lf">
          <div class="dash-lf-top">
            <div class="tot">本月销售总数</div>
            <span>{{ saleMnum }}</span>
            <div class="contrast">
              <i
                v-if="monthSup"
                class="up"
              >
                <img src="../../../icons/icon/shang (1).png">
                {{ saleMonth }}
              </i>
              <i
                v-else
                class="down"
              >
                <img src="../../../icons/icon/shang (2).png">
                {{ saleMonth }}%
              </i>
              同比上周
            </div>
          </div>
          <div class="dash-lf-bot">
            <div class="tot">本月销售总数</div>
            <span>{{ saleWnum }}</span>
            <div class="contrast">
              <i
                v-if="weekSup"
                class="up"
              >
                <img src="../../../icons/icon/shang (1).png">
                {{ saleWeek }}
              </i>
              <i
                v-else
                class="down"
              >
                <img src="../../../icons/icon/shang (2).png">
                {{ saleWeek }}%
              </i>
              同比上周
            </div>
          </div>
        </div>
        <div class="dashboard-lr">
          <div class="dashboard-lr-top">
            <div class="tit">近一周销售统计</div>
            <div class="sel">
              <div class="btn">
                <el-radio-group
                  v-model="radio1"
                  @change="saleSel"
                >
                  <el-radio-button label="今日" />
                  <el-radio-button label="本周" />
                  <el-radio-button label="本月" />
                </el-radio-group>
              </div>
              <!-- <div class="block">
                <el-date-picker
v-model="value1"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd"
                                @change="selSaleTime"
/>
              </div> -->
            </div>
          </div>
          <div class="dashboard-lr-bot">
            <div
              ref="e_chart"
              class="echar"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getsevenData,
  getMothData,
  getNewUser,
  getOrderData,
  getSaleData,
  getUserData,
  getYesUser,
  getYesOrder,
  getOderList,
  getSaleList,
  getOrderDay,
  getOrderWeek,
  getSaleDay,
  getSaleWeek,
  getPendingData
} from '@/api/index.js'
import {
  recentDate,
  // week,
  getWeeK,
  getLstMonthDay,
  currentYM,
  strData,
  nowDate
} from '@/utils/util'
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters(['name'])
  },
  data() {
    // for (let index = 0; index < array.length; index++) {
    //   const element = array[index];

    // }

    return {
      monthOup: true,
      weekOup: true,
      orderMonth: 0,
      orderWeek: 0,
      orderMnum: 0,
      orderWnum: 0,
      monthSup: true,
      weekSup: true,
      saleWeek: 0,
      saleMonth: 0,
      saleWnum: 0,
      saleMnum: 0,
      sevenTotal: 0,
      mothData: 0,
      newUser: 0,
      orderData: 0,
      todaySaleData: 0,
      userData: 0,
      yesUser: 0,
      yesOrder: 0,
      radio: '今日',
      value: '',
      radio1: '今日',
      value1: '',
      // 待处理
      pendingOrder: 0,
      successOrder: 0,
      // 订单天初始数组
      orderDayList: [
        { 'code': '3', count: 0 },
        { 'code': '6', count: 0 },
        { 'code': '9', count: 0 },
        { 'code': '12', count: 0 },
        { 'code': '15', count: 0 },
        { 'code': '18', count: 0 },
        { 'code': '20', count: 0 },
        { 'code': '00', count: 0 }
      ],
      // 订单周初始数组
      orderWeekList: [
        { 'code': getWeeK(-1), count: 0 },
        { 'code': getWeeK(0), count: 0 },
        { 'code': getWeeK(1), count: 0 },
        { 'code': getWeeK(2), count: 0 },
        { 'code': getWeeK(3), count: 0 },
        { 'code': getWeeK(4), count: 0 },
        { 'code': getWeeK(5), count: 0 }
      ],
      // 订单月初始数组
      orderMonthList: [
        { 'code': currentYM() + '-5', count: 0 },
        { 'code': currentYM() + '-10', count: 0 },
        { 'code': currentYM() + '-15', count: 0 },
        { 'code': currentYM() + '-20', count: 0 },
        { 'code': currentYM() + '-25', count: 0 },
        { 'code': currentYM() + '-30', count: 0 }
      ],
      // 销售天初始数组
      saleDayList: [
        { 'code': '3', count: 0 },
        { 'code': '6', count: 0 },
        { 'code': '9', count: 0 },
        { 'code': '12', count: 0 },
        { 'code': '15', count: 0 },
        { 'code': '18', count: 0 },
        { 'code': '20', count: 0 },
        { 'code': '00', count: 0 }
      ],
      // 销售周初始数组
      saleWeekList: [
        { 'code': getWeeK(-1), count: 0 },
        { 'code': getWeeK(0), count: 0 },
        { 'code': getWeeK(1), count: 0 },
        { 'code': getWeeK(2), count: 0 },
        { 'code': getWeeK(3), count: 0 },
        { 'code': getWeeK(4), count: 0 },
        { 'code': getWeeK(5), count: 0 }
      ],
      // 销售月初始数组
      saleMonthList: [
        { 'code': currentYM() + '-5', count: 0 },
        { 'code': currentYM() + '-10', count: 0 },
        { 'code': currentYM() + '-15', count: 0 },
        { 'code': currentYM() + '-20', count: 0 },
        { 'code': currentYM() + '-25', count: 0 },
        { 'code': currentYM() + '-30', count: 0 }
      ],
      disOption: {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#CBCBCB'
            }
          },
          nameGap: 100
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#CBCBCB'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#FFFFFF',
          borderColor: '#CBCBCB',
          padding: 10,
          textStyle: {
            color: '#999999',
            height: 20
          }
        },
        series: [
          {
            data: [120, 22, 10, 200, 60, 30, 70, 23],
            type: 'line',
            lineStyle: {
              color: '#488DFF'
            },
            itemStyle: {
              color: '#488DFF'
            },
            symbol: 'circle',
            symbolSize: 2,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#488DFF' // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: '#4F91FF' // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#B4D0FF' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            smooth: true
          }
        ],
        textStyle: {
          color: '#333333'
        }
      },
      myChart: null,
      regOption: {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#CBCBCB'
            }
          },
          nameGap: 100
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#CBCBCB'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#FFFFFF',
          borderColor: '#CBCBCB',
          padding: 10,
          textStyle: {
            color: '#999999',
            height: 20
          }
        },
        series: [
          {
            data: [120, 22, 10, 200, 60, 30, 70, 23],
            type: 'line',
            lineStyle: {
              color: '#488DFF'
            },
            itemStyle: {
              color: '#488DFF'
            },
            symbol: 'circle',
            symbolSize: 2,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#488DFF' // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: '#4F91FF' // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#B4D0FF' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            smooth: false
          }
        ],
        textStyle: {
          color: '#333333'
        }
      },
      chart: null
    }
  },
  mounted() {
    this.orderInit()

    window.addEventListener('resize', () => {
      this.myChart.resize()
      this.chart.resize()
    })
  },
  created() {
    console.log(this.saleManthList)
    this.disOption.xAxis.data = [
      recentDate(0) + ' 3时',
      recentDate(0) + ' 6时',
      recentDate(0) + ' 9时',
      recentDate(0) + ' 12时',
      recentDate(0) + ' 15时',
      recentDate(0) + ' 18时',
      recentDate(0) + ' 21时',
      recentDate(0) + ' 0时'
    ]
    this.regOption.xAxis.data = [
      recentDate(0) + ' 3时',
      recentDate(0) + ' 6时',
      recentDate(0) + ' 9时',
      recentDate(0) + ' 12时',
      recentDate(0) + ' 15时',
      recentDate(0) + ' 18时',
      recentDate(0) + ' 21时',
      recentDate(0) + ' 0时'
    ]
    this.getOrderList()
    this.getSaleList()
    // console.log(recentDate(1), recentDate(0));
    // this.orderDayData(recentDate(1), recentDate(0))
    this.saleDayData()
    this.orderDayData()
    // this.orderDayData('2019-08-02', '2019-08-02')
    getsevenData().then(res => {
      // console.log(res);
      this.sevenTotal = res.data
    })
    getMothData().then(res => {
      this.mothData = res.data
    })
    getNewUser().then(res => {
      this.newUser = res.data
    })
    getOrderData().then(res => {
      this.orderData = res.data
    })
    getSaleData().then(res => {
      this.todaySaleData = res.data
    })
    getUserData().then(res => {
      this.userData = res.data
    })
    getYesUser().then(res => {
      this.yesUser = res.data
    })
    getYesOrder().then(res => {
      this.yesOrder = res.data
    })
    // 待处理
    this.getPending()
  },
  methods: {
    orderInit() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(this.$refs._chart)
      this.myChart.setOption({ ...this.disOption })
    },
    saleInit() {
      this.chart = this.$echarts.init(this.$refs.e_chart)
      this.chart.setOption({ ...this.regOption })
    },
    getOrderList() {
      getOderList().then(res => {
        // console.log(res);
        // res.data.monthCompare;
        this.orderMnum = res.data.thisMonth
        this.orderWnum = res.data.thisWeek
        if (res.data.monthCompare.slice(0, 1) === '-') {
          this.orderMonth = res.data.monthCompare.slice(1, -1)
          this.monthOup = false
        } else {
          this.monthOup = true
          this.orderMonth = res.data.monthCompare
        }
        if (res.data.weekCompare.slice(0, 1) === '-') {
          this.orderWeek = res.data.weekCompare.slice(1, -1)
          this.weekOup = false
        } else {
          this.weekOup = true
          this.orderWeek = res.data.weekCompare
        }
      })
    },
    getSaleList() {
      getSaleList().then(res => {
        // console.log(res);
        this.saleMnum = res.data.thisMonth
        this.saleWnum = res.data.thisWeek
        if (res.data.monthCompare.slice(0, 1) === '-') {
          this.saleMonth = res.data.monthCompare.slice(1, -1)
          this.monthSup = false
          // console.log(1111);
        } else {
          this.monthSup = true
          this.saleMonth = res.data.monthCompare
        }
        if (res.data.weekCompare.slice(0, 1) === '-') {
          this.saleWeek = res.data.weekCompare.slice(1, -1)
          this.weekSup = false
        } else {
          this.weekSup = true
          this.saleWeek = res.data.weekCompare
        }
      })
    },
    // 刷新
    refBtn() { },
    // 待处理
    getPending() {
      getPendingData().then(res => {
        console.log(res, '待处理')
        res.data.map(item => {
          if (item.order_state === 1) {
            this.pendingOrder = item.count
          }
          if (item.order_state === 5) {
            this.successOrder = item.count
          }
        })
      })
    },
    // 统计单选
    dasSel() {
      if (this.radio === '本周') {
        // console.log(recentDate(0) + "3时");
        this.disOption.xAxis.data = [
          getWeeK(-1) + '星期天',
          getWeeK(0) + '星期一',
          getWeeK(1) + '星期二',
          getWeeK(2) + '星期三',
          getWeeK(3) + '星期四',
          getWeeK(4) + '星期五',
          getWeeK(5) + '星期六'
        ]
        this.orderWeekData(getWeeK(-1), getWeeK(5), this.orderWeekList)
        // console.log(this.disOption.xAxis.data);
      } else if (this.radio === '本月') {
        this.disOption.xAxis.data = [
          currentYM() + '-5日',
          currentYM() + '-10日',
          currentYM() + '-15日',
          currentYM() + '-20日',
          currentYM() + '-25日',
          currentYM() + '-' + getLstMonthDay() + '日'
        ]
        this.orderWeekData(currentYM() + '-5', currentYM() + '-' + getLstMonthDay(), this.orderMonthList)
      } else {
        this.disOption.xAxis.data = [
          recentDate(0) + ' 3时',
          recentDate(0) + ' 6时',
          recentDate(0) + ' 9时',
          recentDate(0) + ' 12时',
          recentDate(0) + ' 15时',
          recentDate(0) + ' 18时',
          recentDate(0) + ' 21时',
          recentDate(0) + ' 0时'
        ]
        this.orderDayData()
      }
      // console.log(this.disOption.xAxis.data);
    },
    // 销售单选
    saleSel() {
      if (this.radio1 === '本周') {
        // console.log(recentDate(0) + "3时");
        this.regOption.xAxis.data = [
          getWeeK(-1) + '星期天',
          getWeeK(0) + '星期一',
          getWeeK(1) + '星期二',
          getWeeK(2) + '星期三',
          getWeeK(3) + '星期四',
          getWeeK(4) + '星期五',
          getWeeK(5) + '星期六'
        ]
        this.getWeekData(getWeeK(-1), getWeeK(5), this.saleWeekList)
        // console.log(this.disOption.xAxis.data);
      } else if (this.radio1 === '本月') {
        this.regOption.xAxis.data = [
          currentYM() + '-5日',
          currentYM() + '-10日',
          currentYM() + '-15日',
          currentYM() + '-20日',
          currentYM() + '-25日',
          currentYM() + '-' + getLstMonthDay() + '日'
        ]
        this.getWeekData(currentYM() + '-5', currentYM() + '-' + getLstMonthDay(), this.saleMonthList)
      } else {
        this.regOption.xAxis.data = [
          recentDate(0) + ' 3时',
          recentDate(0) + ' 6时',
          recentDate(0) + ' 9时',
          recentDate(0) + ' 12时',
          recentDate(0) + ' 15时',
          recentDate(0) + ' 18时',
          recentDate(0) + ' 21时',
          recentDate(0) + ' 0时'
        ]
        this.saleDayData()
      }
    },
    // 去用户管理
    goUser() {
      this.$router.push({
        name: 'User-manage'
      })
    },
    // 交易统计
    goStatistics() {
      this.$router.push({
        name: 'statistics_tran'
      })
    },
    // 短信营销
    goMsg() { },

    // 订单统计eachar天
    orderDayData(startTime, endTime) {
      getOrderDay({
        startTime,
        endTime
      }).then(res => {
        console.log(res, 1000)
        for (let i = 0; i < res.data.length; i++) {
          this.saleDayList.map(item => {
            if (strData(res.data[i].datefmt) === item.code) {
              item.count = Number(res.data[i].count)
            }
          })
        }
        const saleData = []
        this.saleDayList.map(item => {
          saleData.push(item.count)
        })
        this.disOption.series[0].data = saleData
        this.orderInit()
        console.log(saleData)
      })
    },
    // 订单统计eachar周月
    orderWeekData(startTime, endTime, array) {
      getOrderWeek({
        startTime,
        endTime
      }).then(res => {
        // console.log(res, '000')
        for (let i = 0; i < res.data.length; i++) {
          array.map(item => {
            // console.log(item.code, res.data[i].days)
            if ((res.data[i].days) === item.code) {
              item.count = Number(res.data[i].count)
            }
          })
        }
        const saleData = []
        array.map(item => {
          saleData.push(item.count)
        })
        this.disOption.series[0].data = saleData
        this.orderInit()
      })
    },
    // 销售统计echar天
    saleDayData(startTime, endTime) {
      getSaleDay({
        startTime,
        endTime
      }).then(res => {
        console.log(res, '000')
        for (let i = 0; i < res.data.length; i++) {
          this.saleDayList.map(item => {
            console.log(strData(res.data[i].days))
            if (strData(res.data[i].days) === item.code) {
              item.count = Number(res.data[i].count)
            }
          })
        }
        const saleData = []
        this.saleDayList.map(item => {
          saleData.push(item.count)
        })
        this.regOption.series[0].data = saleData
        this.saleInit()
        console.log(saleData)
      })
    },
    // 销售统计echar周月
    getWeekData(startTime, endTime, array) {
      getSaleWeek({
        startTime,
        endTime
      }).then(res => {
        // console.log(res, '000')
        for (let i = 0; i < res.data.length; i++) {
          array.map(item => {
            // console.log(item.code, res.data[i].days)
            if ((res.data[i].days) === item.code) {
              item.count = Number(res.data[i].count)
            }
          })
        }
        const saleData = []
        array.map(item => {
          saleData.push(item.count)
        })
        this.regOption.series[0].data = saleData
        this.saleInit()
        // console.log(saleData)
      })
    },
    // 订单统计时间
    selOrderTime() { },
    // 销售统计时间
    selSaleTime() {

    }
  }
}
</script>

